<template>
  <div id="AddCongee">
    <!-- 头部导航 -->
    <van-nav-bar fixed>
      <template style="color:orange" #left>
        <!-- <i class="iconfont icon-jiahao" size="16" /> -->
        <span @click="toReturn">取消</span>
      </template>
      <template #title>
        创建菜谱
      </template>
      <template style="color:orange" #right>
        <!-- <i class="iconfont icon-bell" /> -->
        存草稿
      </template>
    </van-nav-bar>
    <!-- vant的upload组件 -->
    <!-- 菜谱封面 -->
    <div style="margin-top:50px; width：100%;height:360px" >
      <van-uploader title="+菜谱封面，诱人的封面图是吸引厨友的关键" v-model="fileList" :max-count="1" preview-size="100vw" >
       <template #preview-cover="file">
        <div  class=" preview-cover van-ellipsis">{{ file.name }}</div>
        
        </template>
       
      </van-uploader>
       
         <div style="position: relative;bottom:-100px">
        <p class="btn-f" ><p>+菜谱封面，诱人的封面图是吸引厨友的关键</p>
        </div>
        
      <!-- 菜谱标题 -->
      <div class="menu-name" style="margin-top:180px;">
          
        <van-cell-group style="width:70%; margin: 0 auto; text-align: center;">
          <van-field placeholder="写下你的菜谱名称吧" />
        </van-cell-group>
        <input
          style="border:0; padding:20px"
          type="text"
          placeholder="输入这道美食背后的故事"
        />
      </div>
      <!-- 用料配料 -->
      <div class="mixture">
        <h3>用料</h3>
        <p>猜你可能需要用到</p>
        <van-button type="default">大米</van-button> &nbsp; <van-button type="default">肉</van-button>
         <div class="used">
          <div>
            <input type="text" placeholder="食材：如鸡蛋">
          </div>
          <div>
            <input type="text" placeholder="用量：如一只">
          </div>
        </div>
        <div class="menuclack">
          <div><button>再加一行</button></div>
          <div><button>调整用料</button></div>
        </div>
        <!-- 做法 -->
        <div class="make">
          <div><span>做法</span></div>
          <div><button>批量传图</button></div>
        </div>
        </div>

        <!-- 步骤 -->
        <div class="step">
          <p>步骤1</p>
          <div>
            <!-- <van-uploader class="van-uploader" v-model="fileList">
              <van-button class="btn-f" style="" icon="photo" type="primary"
                ><p>+步骤图，上传至少2张步骤图，会得到更多关注</p></van-button>
            </van-uploader> -->
            <!--添加步骤 -->
          <van-uploader v-model="fileList" :max-count="1" style="border-radius: 10px;"  preview-size="80vw" >
            <template #preview-cover="file">
              <div  class=" preview-cover van-ellipsis">{{ file.name }}</div>
              </template>
          </van-uploader>
            <input style="border:0;margin-top:50px;" type="text" placeholder="添加步骤说明 至少2步">
          </div>

          <div class="menuclack">
          <div><button>再增加一步</button></div>
          <div><button>调整步骤</button></div>
        </div>

          
      </div>
      <van-button class="add-menubtn" type="default">发布这个按钮</van-button>
    </div>    
  </div>
</template>

<script>
export default {
  data() {
    return {
      pop:null,
       fileList: [],
    }
  },
  methods: {
    toReturn(){
      this.$router.go(-1);
    },
    //  afterRead(file) {
    //   file.status = 'uploading';
    //   file.message = '上传中...';

    //   setTimeout(() => {
    //     file.status = 'failed';
    //     file.message = '上传失败';
    //   }, 1000);
    // },

  },
};
</script>

<style lang="scss" scoped>
#AddCongee {
  .van-nav-bar {
    color: orange;
    
    
  }
     .preview-cover {
        height:30px;
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 4px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
      }
      .btn-f{
        border:0px;
        background-color: transparent;
        z-index: 1000;
        user-select: none;
      }

  .van-uploader {
    width: 100% !important;
    height: 260px;
    .van-uploader__preview{
      width: 100vw;
      height: 35vh;
    }
 
    .btn-f {
      width: 100vw;
      height: 35vh;
    }
  }

  .menu-name {
    .van-cell {
      font-size: 25px;
    }
  }

  // 配料
  .mixture{
    margin: 10px 25px;
    width: 85%;
    // .van-button--normal{
    //   margin: 20px 0;
    // margin: 10px;
    // }

      // 用料
    .used {
      margin: 10px auto;
      text-align: left;
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      border-bottom: 1px dashed #ccc;
      border-top: 1px dashed #ccc;
      div {
        input{
          width: 100%;
          font-size: 18px;
          padding:10px;
          border: 0;
        }
        // margin-right: 10px;
        
      }
    }
    // 添加和删除用料
    .menuclack{
      display: flex;
      justify-content: space-around;
      button{
        color: red;
        border:0;
        background-color: white;
      }
    }
    // 制作步骤
    .make{
      margin-top: 20px;    
      display: flex;
      justify-content: space-around;
      button{
        color: red;
        border:0;
        background-color: white;
      }
    }
  }
  .add-menubtn{
    margin-top: 30px;
    background-color: orange;
    width: 100%;
    color: white;
  }
   // 添加和删除用料
    .menuclack{
      display: flex;
      justify-content: space-around;
      button{
        color: red;
        border:0;
        background-color: white;
      }
    }
    .step{
      margin: 0px 30px ;
    }
}
</style>
